<template>
	<view v-if="pircShow">
		<!-- 时段选择 -->
		<pupovercoat ref="ref_selTime" :iscustom="true" ptitle="时段选择" :ThemeType="ThemeType" ptext="( 起点当地时间 )"
			:zindex="300"
			@saveclick="pupConfirm" @close="handleClose">
			<template slot="content">

				<view class="pupContent">
					<picker-view :value="pickvalist" :indicator-style="indicatorStyle" @change="TimePerChange"
						class="pupPickeriew">
						<picker-view-column>
							<view class="tperiod FlexBetween" v-for="(item, index) in YearList">
								<view class="tper_txt">
									{{item}}年
								</view>
							</view>
						</picker-view-column>

						<picker-view-column>
							<view class="tperiod FlexBetween" v-for="(item, index) in MounthList">
								<view class="tper_txt">
									{{item}}月
								</view>
							</view>
						</picker-view-column>

						<picker-view-column>
							<view class="tperiod FlexBetween" v-for="(item, index) in DayList">
								<view class="tper_txt">
									{{item}}日
								</view>
							</view>
						</picker-view-column>

					</picker-view>
				</view>

			</template>
		</pupovercoat>



	</view>
</template>

<script>
	import pupovercoat from "@/bundle4/components/pupovercoat.vue"
	export default {
		components: {
			pupovercoat,
		},
		props: {
			popshow: {
				type: Boolean,
				default: false,
			},
			// 主题颜色 1.蓝色  2.红色  3.橙色
			ThemeType: {
				type: Number,
				default: 1,
			},
			defvalue: { // 2024-01-01 00:00
				type: String,
				default: ''
			},
		},
		data() {
			return {
				
			
				indicatorStyle: `
					height: 50px !important;
					border-radius: 12rpx;
					background: rgba(145, 145, 145, 0.1);
				`,

				// 日期
				YearList: [],
				MounthList: [],
				DayList: [],
				pickvalist: [],
				pircShow: false,
				
			}
		},
		watch: {
			popshow(newVal){
				if(newVal) {
					this.getTimeSelect()
					this.openPup()
				}
			},
		},
		created() {
			this.getTimeSelect()
		},
		methods: {
			// 返回日期
			retFollowTime() {
				const date = new Date()
				// 年
				const year_Arr = []
				const year_cur = date.getFullYear()
				for (let i = 1990; i <= 2050; i++) {
					year_Arr.push(i)
				}
				this.YearList = year_Arr
				// 月 
				const months_Arr = []
				const month_cur = date.getMonth() + 1
				for (let i = 1; i <= 12; i++) {
					let va = i < 10 ? '0' + i : i
					months_Arr.push(va)
				}
				this.MounthList = months_Arr
				// 设置默认
				if(!this.defvalue) {
					const day_cur = date.getDate()
					let yIndex = year_Arr.findIndex(v=>v == year_cur)
					this.pickvalist = [yIndex, month_cur - 1, day_cur - 1]
					this.setMonthDays(year_cur, month_cur)
				}
				else {
					this.setDefaultTime()
				}
			},
			setMonthDays(cyear, cmonth){
				// 获取当前月份有多少天
				const currentDate = new Date(); // 获取当前日期
				const currentMonth = cmonth || currentDate.getMonth() + 1; // 获取当前月份（注意月份是从0开始的，所以需要加1）
				const cur_year = cyear || currentDate.getFullYear()
				const daysInMonth = new Date(cur_year, currentMonth, 0).getDate(); // 获取指定月份的天数
				let days_Arr = []
				for (let i = 1; i <= daysInMonth; i++) {
					let va = i < 10 ? '0' + i : i
					days_Arr.push(va)
				}
				this.DayList = days_Arr
			},
			// 设置默认
			setDefaultTime(){
				let arr1 = this.defvalue.split('-')
				// 年
				let c_y = arr1[0]
				let findex1 = this.YearList.findIndex(v=>v == c_y)
				// 月
				let c_m = arr1[1]
				let findex2 = this.MounthList.findIndex(v=>v == c_m)
				this.setMonthDays(c_y, c_m)
				// 日
				let findex3 = this.DayList.findIndex(v=>v == arr1[2])
				
				this.pickvalist = [findex1, findex2, findex3]
			},
			getTimeSelect() {
				this.retFollowTime()
				this.pircShow = true
			},
			TimePerChange(e) {
				let {
					value
				} = e.detail
				this.pickvalist = value
				let c_year = this.YearList[value[0]] || ''
				let c_month = value[1] + 1
				this.setMonthDays(c_year, c_month)
			},
			openPup() {
				if (this.$refs.ref_selTime) {
					this.$refs.ref_selTime.pupshow = true
				}
			},
			retaddzro(val){
				return val < 10 ? '0' + val : val;
			},
			pupConfirm() {
				let val1 = this.YearList[this.pickvalist[0]]
				let val2 = this.MounthList[this.pickvalist[1]]
				let val3 = this.DayList[this.pickvalist[2]]
				let time = `${val1}-${val2}-${val3}`
				let resObj = {
					name: time,
					value: new Date(time).getTime(),
				}
				this.$emit('savetime', resObj)
			},
			
			handleClose(done) {
				this.$emit('update:popshow', false)
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/bundle4/css/Flex.scss";
	@import "./css/time.scss";
</style>